<template>
  <el-col :span="11" style="width:700px">
    <el-row>
      <el-col :span="11">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <svg-icon icon-class="ds-person" /><span>账户信息</span>
          </div>
          <el-form-item label="手机号">
            18602239865
          </el-form-item>
          <el-form-item label="注册时间">
            2017-06-27 9:00
          </el-form-item>
          <el-form-item label="注册IP">
            192.168.111.10（天津）
          </el-form-item>
          <el-form-item label="不良记录">
            2017年，曾脱网 <a>查看全部</a>
          </el-form-item>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <svg-icon icon-class="ds-person" /><span>保障人信息</span>
          </div>
          <el-form-item label="姓名">
            姓名
          </el-form-item>
          <el-form-item label="基础信息">
            女（36岁）
          </el-form-item>
          <el-form-item label="身份证号">
            120103199207185421
          </el-form-item>
          <el-form-item label="与保障人关系">
            本人
          </el-form-item>
          <el-form-item label="居住地">
            天津 市内六区 南开区
          </el-form-item>
          <el-form-item label="详细地址">
            梅苑路12号
          </el-form-item>
          <el-form-item label="健康告知问卷">
            <a>查看</a>
          </el-form-item>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <svg-icon icon-class="ds-person" /><span>监护人信息</span>
          </div>
          <el-form-item label="姓名">
            姓名
          </el-form-item>
          <el-form-item label="基础信息">
            女（36岁）
          </el-form-item>
          <el-form-item label="身份证号">
            120103199207185421
          </el-form-item>
        </el-card>
      </el-col>
      <el-col :span="11" :offset="1">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <svg-icon icon-class="ds-person" /><span>订单信息</span>
          </div>
          <el-form-item label="订单编号">
            AA2017062799
          </el-form-item>
          <el-form-item label="下单时间">
            2017-06-27 9:00
          </el-form-item>
          <el-form-item label="订单状态">
            待生效
          </el-form-item>
          <el-form-item label="产品名称">
            青铜-儿童覆盖计划（CHIP）
          </el-form-item>
          <el-form-item label="购买IP">
            192.168.111.10（天津）
          </el-form-item>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <svg-icon icon-class="ds-person" /><span>支付信息</span>
          </div>
          <el-form-item label="缴费方式">
            月缴
          </el-form-item>
          <el-form-item label="价格类型">
            家庭价
          </el-form-item>
          <el-form-item label="支付时间">
            2017-06-27 9:00
          </el-form-item>
          <el-form-item label="订单总额">
            1440
          </el-form-item>
          <el-form-item label="已支付金额">
            240
          </el-form-item>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <svg-icon icon-class="ds-person" /><span>凭证信息</span>
          </div>
          <el-form-item label="本人身份证">
            <a>查看</a>
          </el-form-item>
          <el-form-item label="本人社保卡">
            <a>查看</a>
          </el-form-item>
          <el-form-item class="other" label="本人社保参保信息截图">
            <a>查看</a>
          </el-form-item>
        </el-card>
      </el-col>
    </el-row>
  </el-col>
</template>
<script>

export default {
  props: {
    info: Object
  },
  data() {
    return {
    }
  },
  created() {
    // this.getList()
  },
  methods: {
  }
}
</script>
<style>
  .el-card .el-form-item {
    margin-bottom: 0px;
  }
  .el-form-item__label {
    width: 100px !important;
  }
  .el-col .el-card__header {
  	border-bottom:0 !important;
  }
  .el-form-item--medium {
  	border-bottom: 1px solid #ebeef5;
  }
  .el-card__header svg{
  	display: none;
  }
  .box-card {
  	margin-top: 20px;
  }
  .el-col > div.el-card:nth-child(1){
  	border-left: 4px solid #3fb2fe;
  }
  .el-col > div.el-card:nth-child(2){
  	border-left: 4px solid #a1c14c;
  }
  .el-col > div.el-card:nth-child(3){
  	border-left: 4px solid #3fb2fe;
  }
  .other .el-form-item__label{
  	line-height: 1.5;
  }
  .el-col-offset-1 > div.el-card:nth-child(1){
  	border-left: 4px solid #d996ff;
  }
  .el-col-offset-1 > div.el-card:nth-child(2){
  	border-left: 4px solid #ff7357;
  }
  .el-col-offset-1 > div.el-card:nth-child(3){
  	border-left: 4px solid #d996ff;
  }
  label.el-form-item__label {
  	color: #999;
  	line-height: 1.5;
  	font-weight: normal;
  }
  .el-form-item__content{
  	word-break: break-all;
    text-indent: -50px;
  }
  .el-form-item {
  	padding: 10px 0;
  }
  .el-card__header span {
  	font-weight: 400;
  }
  .el-card__body > div:last-child{
  	border:none;
  }
  .el-card__body {
  	padding-top: 0;
  	padding-bottom: 10px;
  }
</style>